<template>
  <div>
    <el-drawer
      v-model="innerDrawer"
      title="列表设置"
      :append-to-body="true"
      size="700px"
      :before-close="handleClose"
    >
      <el-tree
        highlight-current
        :allow-drop="allowDrop"
        :allow-drag="allowDrag"
        :data="columnsSelf"
        draggable
        default-expand-all
        node-key="prop"
        @node-drag-start="handleDragStart"
        @node-drag-enter="handleDragEnter"
        @node-drag-leave="handleDragLeave"
        @node-drag-over="handleDragOver"
        @node-drag-end="handleDragEnd"
        @node-drop="handleDrop"
      >
        <template #default="{ node, data }">
          

          <div
            class="aic jcb columnItem"
            :style="{
              cursor: data.fixed ? 'not-allowed' : 'move',
            }"
          >
            <div class="aic">
              <!-- <div class="el-icon-rank"></div> -->
              <el-icon><Rank /></el-icon>
              <el-button style="margin: 0 10px" link>{{
                node.label
              }}</el-button>
            </div>
            <div class="aic">
              <el-select
                v-model="data.fixed"
                placeholder="固定位置"
                size="mini"
                clearable
                style="width: 140px"
              >
                <el-option label="不固定" value="" />
                <el-option label="固定到列头" value="left" />
                <el-option label="固定到列尾" value="right" />
              </el-select>
              <div class="ml10">
                <el-switch size="mini" v-model="data.visible"> </el-switch>
              </div>
            </div>
          </div>
        </template>
      </el-tree>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="innerDrawer = false">取消</el-button>
          <el-button type="primary" @click="handleSave"> 保存 </el-button>
        </span>
      </template>
    </el-drawer>
    <ComDialog v-model="closeLoading" title="提示">
      确认不保存设置?
       <template #footer>
      <div>
        <el-button size="large" @click="loadingClose">取消</el-button>
        <el-button
          size="large"
          type="primary"
          @click="submitData"
          >确定关闭</el-button
        >
      </div>
    </template>
    </ComDialog>
  </div>
</template>

<script setup lang="tsx">
import { shallowRef, reactive,defineExpose, defineEmits, onMounted, computed, toRaw, ref } from "vue";
import type Node from "element-plus/es/components/tree/src/model/node";
import type { DragEvents } from "element-plus/es/components/tree/src/model/useDragNode";
import type {
  AllowDropType,
  NodeDropType,
} from "element-plus/es/components/tree/src/tree.type";
import { ElMessageBox } from "element-plus";

const emits = defineEmits(["handelColumns"]);
const state = reactive({});

const props = defineProps({
  columns: {
    type: Array,
    required: true,
    default: () => [],
  },
});

const columnsSelf = computed(() =>toRaw(props.columns));
const drawer = shallowRef(false);
const innerDrawer = shallowRef(false);
const closeLoading = shallowRef(false);
const loadingClose = () =>{
    closeLoading.value = false
}
const doneData =ref()
const submitData = () =>{
  loadingClose()
  doneData.value()
}
const handleClose = (done: () => void) => {
  closeLoading.value = true
  doneData.value = done
  // ElMessageBox.confirm(
  //   "","",
  //   {
  //     appendTo :"body",
  //   }
  //  )
  //   .then(() => {
  //     done();
  //   })
  //   .catch(() => {
  //     // catch error
  //   });
};
const handleSave = () => {
  innerDrawer.value = false;
  emits("handelColumns", columnsSelf.value);
};

const open = () => {
  innerDrawer.value = true;
};

const handleDragStart = (node: Node, ev: DragEvents) => {
};
const handleDragEnter = (
  draggingNode: Node,
  dropNode: Node,
  ev: DragEvents,
) => {
  // console.log("tree drag enter:", dropNode.label);
};
const handleDragLeave = (
  draggingNode: Node,
  dropNode: Node,
  ev: DragEvents,
) => {
  // console.log("tree drag leave:", dropNode.label);
};
const handleDragOver = (draggingNode: Node, dropNode: Node, ev: DragEvents) => {
  // console.log("tree drag over:", dropNode.label);
};
const handleDragEnd = (
  draggingNode: Node,
  dropNode: Node,
  dropType: NodeDropType,
  ev: DragEvents,
) => {
  // console.log("tree drag end:", dropNode && dropNode.label, dropType);
};
const handleDrop = (
  draggingNode: Node,
  dropNode: Node,
  dropType: NodeDropType,
  ev: DragEvents,
) => {
  // console.log("tree drop:", dropNode.label, dropType);
};
const allowDrop = (draggingNode: Node, dropNode: Node, type: AllowDropType) => {
  if (dropNode.data.label === "Level two 3-1") {
    return type !== "inner";
  } else {
    return true;
  }
};
const allowDrag = (draggingNode: Node) => {
  // console.log("draggingNode :>> ", draggingNode.data.fixed);
  return draggingNode.data.fixed ? false : true;
};

defineExpose({
  open,
});
</script>

<style lang="scss">
.el-tree-node__content {
  height: 40px;
  width: 500px;
}
.columnItem {
  cursor: move;
  width: 100%;
}
</style>
